<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>POLO360练习</title>
		<!-- 引入reset.css用来清除浏览器的默认样式 -->
		<link rel="stylesheet" type="text/css" href="../css/reset-min.css" />
		<!-- 引入page-index -->
		<link rel="stylesheet" type="text/css" href="../css/page-index-min.css" />
	</head>
	<body>
		<!-- 
			id class和文件的命名规范
			 -命名时尽量使用英文，如果不会可以使用拼音，但是不要英文和拼音混用
			 -命名格式：
				- 驼峰命名法：
					- 首字母小写，每个单词开头字母大写（aaaBbbCcc）
				- 也可以所有的字母都小写，单词之间用_或-连接（aaa_bbb_ccc aaa-bbb-ccc）
		 -->

		<!-- 创建头部div header -->
		<!-- header开始 -->
		<div class="header w">
			<!-- 导航条 -->
			<ul class="nav">
				<li>
					<a href="#">HOME</a>
					<p>Back To home</p>
				</li>
				<li>
					<a href="#">PRODUCTS</a>
					<p>What we have for you</p>
				</li>
				<li>
					<a href="#">SERVICES</a>
					<p>Things we do</p>
				</li>
				<li>
					<a href="#">BLOG</a>
					<p>Follow our updates</p>
				</li>
				<li>
					<a href="#">CONTACT</a>
					<p>Ways to reach us</p>
				</li>
			</ul>
			
			<!-- 在div中设置logo -->
			<div class="logo">
				<a href="#" title="very棒的网页">
					<img src="img/logo.png" alt="网站的logo" />
				</a>
			</div>
		</div>
		<!-- header结束 -->
		
		<!-- banner开始 -->
		<div class="banner w">
			<img src="img/banner/banner01.png" alt="banner01"/>
			<!-- 创建一个div，用于方式indicator -->
			<div class="dotDiv">
				<a href="#"></a>
				<a class="dotTwo" href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
			</div>
		</div>
		<!-- banner结束 -->
		
		<!-- content开始 -->
		<div class="content w clearfix">
			
			<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
			
			<div class="pl">
				<h2>Perfect Logic</h2>
				<p class="subTitle">All you want your website to do.</p>
				<div class="subImgDiv">
					<img src="img/item/sub_img1.png" >
				</div>
				<p class="subContent">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
				<a href="#" class="learnMore">Learn More</a>
			</div>
			
			<div class="cs">
				<h2>Complete Solution</h2>
				<p class="subTitle">A tool anything and everything you can think</p>
				<div class="subImgDiv">
					<img src="img/item/sub_img2.png" >
				</div>
				<p class="subContent">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.</p>
				<a href="#" class="learnMore">Learn More</a>
			</div>
			
			<div class="uc">
				<h2>Uber Culture</h2>
				<p class="subTitle">Fresh. Modern and ready for future</p>
				<div class="subImgDiv">
					<img src="img/item/sub_img3.png" >
				</div>
				<p class="subContent">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
				<a href="#" class="learnMore">Learn More</a>
			</div>
		</div>
		<!-- content结束 -->
		
		<!-- contact开始 -->
		<div class="contact w clearfix">
			
			<div class="sc">
				<h2>Social Connection</h2>
				<p class="scp">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
				<div class="icon">
					<a href="#"><img src="img/rss.png" ></a>
					<a href="#"><img src="img/fb.png" ></a>
					<a href="#"><img src="img/in.png" ></a>
					<a href="#"><img src="img/yt.png" ></a>
					<a href="#"><img src="img/tw.png" ></a>
				</div>
				<h2 class="sch2">Newsletter</h2>
				<p class="scp">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
				<form action="#">
					<!--
						在文本框和文本域中可以通过placeholder来指定提示文字（hint）
						这个属性在IE8及以下浏览器中不支持，如果要兼容IE8需要使用JS
					 -->
					<input type="text" class="txt name" placeholder="your name"/>
					<button class="send">Subscribe</button>
				</form>
			</div>
			
			<div class="cc">
				<h2>Contact</h2>
				<form action="#">
					<!--
						在文本框和文本域中可以通过placeholder来指定提示文字（hint）
						这个属性在IE8及以下浏览器中不支持，如果要兼容IE8需要使用JS
					 -->
					<input type="text" class="txt name" placeholder="your name"/>
					<input type="text" class="txt address" placeholder="your email address"/>
					<textarea class="area message" placeholder="message"></textarea>
					<button class="send">Send it</button>
				</form>
			</div>
			
			<div class="nu">
				<h2>News Updates</h2>
				<p>
					<img src="img/nu_img1.png" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
				</p>
				<p>
					<img src="img/nu_img2.png" >Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
				</p>
				<p>
					<img src="img/nu_img3.png" >At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
				</p>
				<button class="send nuSend">Visit our Blog</button>
			</div>
		</div>
		
		<!-- contact结束 -->
		
		<!-- footer开始 -->
		<div class="footer">
			<div class="w">
				<p class="copy">Copyright 2010. Studio VIVROCKS. All Rights Reserved.</p>
				<p>Site Powered by Wordpress. Design and Developed by VIVROCKS.</p>
				<p><a href="#">Home | </a><a href="#">About | </a><a href="#">Products | </a><a href="#">Services | </a><a href="#">Contact</a></p>
				<p><a href="#">Privacy Policy | </a><a href="#">Terms of use</a></p>
			</div>
			
		</div>
		
		<!-- footer结束 -->

		<!-- 处理IE6的png图片问题 -->
		<!--[if IE 6]>
		 	<script src="../js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript" charset="utf-8"></script>
		 	<script type="text/javascript">DD_belatedPNG.fix("div,img,a,h1,button");//参数传css选择器(例如："div,img")</script>
		 <![endif]-->

	</body>
</html>
